<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="1090px"
      :title="title"
      wrapClassName="rotate-modal-container"
      @cancel="closeModal()"
    >
      <div class="main" ref="viewtools">
        <div id="video-container" ref="video"></div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import EZUIKit from "ezuikit-js";
import { getZhgdVideoDetail } from "@/api/wisdom-beam/security-app.js";
import {
  getVideoToken,
  startVideoControl,
  stopVideoControl,
  addPreset,
  clearPreset,
  movePreset,
} from "@/api/monitor_video.js";

var player = null;
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
    title: {
      type: [String],
      default: "视频监控",
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      resultData: {},
      index: "",
    };
  },
  methods: {
    //查询详情
    getDetail() {
      getZhgdVideoDetail(this.id)
        .then((res) => {
          let { data } = res;
          this.resultData = data?.result || "";
          this.index = data?.result?.intdata;
          this.$nextTick(() => {
            this.getInitPlayer();
          });
        })
        .catch((_) => {
          this.index = "";
        });
    },
    async getInitPlayer() {
      // divW和divH是获取了父级宽高 使播放容器能铺满div
      let divW = this.$refs.viewtools.clientWidth;
      let divH = this.$refs.viewtools.clientHeight;
      this.$parent.videoDefinition;
      let { deviceSerialNumber, channelNumber, type } = this.resultData;
      //判断播放器模板
      let videoModel = type == 0 ? "pcLive" : "security";
      //判断初始化视频高清还是标清
      let ezuikit = "";
      if (this.$parent.videoDefinition) {
        ezuikit = `${channelNumber}.hd.live`;
      } else {
        ezuikit = `${channelNumber}.live`;
      }
      let token = await this.getVideoToken();
      player = new EZUIKit.EZUIKitPlayer({
        id: "video-container", // 视频容器ID
        accessToken: token,
        url: `ezopen://open.ys7.com/${deviceSerialNumber}/${ezuikit}`,
        //simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
        template: videoModel,
        width: divW - 40,
        height: divH - 20,
        audio: 0,
      });
      window.player = player;
    },
    getVideoToken() {
      return new Promise((resolve, reject) => {
        getVideoToken({
          appKey: this.resultData.appkey,
          appSecret: this.resultData.secret,
        })
          .then((res) => {
            let { data } = res;
            resolve(data?.accessToken || "");
          })
          .catch((_) => {
            reject("");
          });
      });
    },
    //关闭弹框
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
  beforeDestroy() {
    player.stop();
  },
};
</script>

<style lang="less" scoped>
/deep/.rotate-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .main {
    padding: 0px 20px 20px 20px;
    height: 610px;
    #video-container {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
